<template>
  <div class="s-item">
    <span>{{songName}}</span>
    <a @click="handlePlay" href="javascript:void(0)">
      {{ playText }}
    </a>
  </div>
</template>

<script>
export default {
  name: "SongItem",
  props: {
    songName: {
      type: String,
      required: true,
      default: ''
    }
  },
  data() {
    return {
      isPlay: false
    }
  },
  computed: {
    playText() {
      return this.isPlay ? '暂停' : '播放'
    }
  },
  methods: {
    handlePlay() {
      this.isPlay = !this.isPlay
    }
  }
}
</script>

<style scoped>

</style>